<template>
  <div :class="className">
    <!-- style -->
    <div v-html="css"></div>

    <div class="tab-box">
      <!-- <div class="tab-item">
        <div class="red-title"><span style="font-size: 13px;">￥</span>88.00</div>
        <div>当月营业额</div>
      </div> -->
      <div class="tab-item">
        <div class="red-title"><span style="font-size: 13px;">￥</span>88.00</div>
        <div>传媒基金</div>
      </div>
      <div class="tab-item">
        <div class="red-title"><span style="font-size: 13px;">￥</span>88.00</div>
        <div>欢豆基金</div>
      </div>
      <div class="tab-item">
        <div class="red-title"><span style="font-size: 13px;">￥</span>88.00</div>
        <div>分享基金</div>
      </div>
    </div>

  </div>
</template>

<script>
	// 自定义样式
	const css = function () {
		if(this.datas.preview_color) {
			const {
				preview_color,
			} = this.datas;

			return `
        .component-${this.id} .tab-box {
            background-color: ${preview_color.color};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ''});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }
    `;
		}
	};

	export default {
		props: ['id', 'datas', 'styles'],
		computed: {
			css() {
				return '<style>' + css.call(this) + '</style>';
			},
			className() {
				const name = ['component-wrapper', `component-${this.id}`];
				return name;
			},
		},

		methods: {
			// rem转换
			px2rem(val = 0) {
				return (val / 75) + 'rem';
			}
		},

		mounted() {
			this.$emit('loaded');
		}
	};
</script>

<style lang="less" scoped>
  // 默认
  .component-wrapper {
    width: 375px;
  }

  .tab-box {
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
  }

  .tab-item {
    flex: 1;
    text-align: center;
  }

  .red-title {
    font-size: 16px;
    color: #f43838;
  }
</style>
